import 'package:flutter/material.dart';

import 'package:flutter_hooks/flutter_hooks.dart';
// 适配像素
import 'package:make_list/utiles/adapation.dart';
import 'package:make_list/pages/list.dart';

class MyHomePage extends HookWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 初始化AdaptSize
    AdaptSize.initialize(context);
    final selectedIndex = useState(0);
    GlobalKey<ScaffoldState> myHomePageScaffoldKey = GlobalKey();
    void openHomeDrawer() {
      myHomePageScaffoldKey.currentState?.openDrawer();
    }

    List listBottomItem = [
      MyList(openHomeDrawer: openHomeDrawer),
      const Text('data')
    ];

    return Scaffold(
      key: myHomePageScaffoldKey,
      drawer: Drawer(
        width: AdaptSize.px(233.5),
        backgroundColor: Colors.white,
        child: const MyDrawer(),
      ),
      body: SafeArea(
        child: listBottomItem[selectedIndex.value],
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.white,
        selectedItemColor: Colors.black,
        items: [
          BottomNavigationBarItem(
              icon: Image.asset(
                'assets/images/footer_left.png',
                width: AdaptSize.px(17.5),
                height: AdaptSize.px(18.5),
              ),
              label: 'home'),
          BottomNavigationBarItem(
              icon: Image.asset(
                'assets/images/footer_right.png',
                width: AdaptSize.px(20.5),
                height: AdaptSize.px(22.5),
              ),
              label: 'setting'),
        ],
        currentIndex: selectedIndex.value,
        onTap: (val) {
          selectedIndex.value = val;
        },
      ),
    );
  }
}

class MyDrawer extends HookWidget {
  const MyDrawer({super.key});

  @override
  Widget build(BuildContext context) {
    // 侧边框列表

    final firstWord = useState('A');
    List<DrawerListItem> drawerList = [
      const DrawerListItem(
        firstWord: 'A',
        title: 'All',
      ),
      const DrawerListItem(
        firstWord: 'W',
        title: 'Work',
      ),
      const DrawerListItem(
        firstWord: 'S',
        title: 'Study',
      ),
      const DrawerListItem(
        firstWord: 'N',
        title: 'No classification',
      )
    ];
    return SafeArea(
      child: Column(
        children: [
          const Text('Have been making plans'),
          const Text('for 2 days'),
          ...drawerList.map((e) => ListTile(
                onTap: () {
                  firstWord.value = e.firstWord;
                },
                title: Row(
                  children: [
                    CircleFont(
                      font: e.firstWord,
                      size: AdaptSize.px(20),
                    ),
                    const SizedBox(width: 5),
                    Text(
                      e.title,
                      style: TextStyle(fontSize: AdaptSize.px(14)),
                    )
                  ],
                ),
                trailing: Visibility(
                  visible: e.firstWord == firstWord.value,
                  child: const Icon(
                    Icons.check,
                    size: 13,
                  ),
                ),
              ))
        ],
      ),
    );
  }
}

class DrawerListItem {
  const DrawerListItem({
    required this.title,
    required this.firstWord,
  });
  final String title;
  final String firstWord;
}

// 圆形字体
class CircleFont extends HookWidget {
  const CircleFont({super.key, this.size = 20, this.font = ''});
  final double size;
  final String font;
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: size,
      height: size,
      decoration: BoxDecoration(
        border: Border.all(),
        shape: BoxShape.circle,
      ),
      child: Text(
        maxLines: 1,
        font,
        style: TextStyle(
          fontSize: size * 0.6,
        ),
      ),
    );
  }
}

class Homecalendar extends HookWidget {
  const Homecalendar({super.key, this.bgColor = const Color(0xFFFFFFFF)});
  final Color bgColor;
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      // height: 100,
      padding: EdgeInsets.symmetric(horizontal: AdaptSize.px(24)),
      decoration: BoxDecoration(boxShadow: const [
        BoxShadow(
          color: Color.fromARGB(255, 231, 231, 231),
          offset: Offset(0, 5),
          blurRadius: 5,
        ),
      ], color: bgColor),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '2023',
            style: TextStyle(
              fontSize: AdaptSize.px(17),
              fontWeight: FontWeight.bold,
            ),
          ),
          Text(
            'September 6',
            style: TextStyle(
              fontSize: AdaptSize.px(17),
              fontWeight: FontWeight.bold,
            ),
          )
        ],
      ),
    );
  }
}
